<template>
    <div class="circle-item-box">
        <div v-if="circleList.length >= 1" class="circle-item" v-for="(item, index) in circleList" :key="index" @click="enterDetail(item.id)">
            <img :src="item.coverImg" alt="">
            <div class="circle-item-intro">
                <h3>{{item.title}}</h3>
                <p><span >{{item.summary}}</span></p>
                <span class="circle-item-price">{{item.price}}元</span><a href="javascript:;" class="circle-item-more">详情</a>
            </div>
        </div>
        <div class="no-circle-box" v-if="circleList.length < 1">
            <img src="../../../assets/img/no-data-show.png" alt="">
            <p>暂无数据</p>
        </div>
    </div>
</template>
<script>
import cookie from '../../../../util/cookie.js'
export default {
    props: ['circleList', 'status'],
    data () {
        return {
            agentId: JSON.parse(localStorage.getItem('dongHang_data')).agentId
        }
    },
    watch: {
        circleList: {
            handler(newValue, oldValue) {
    　　　　　  for (let i = 0; i < newValue.length; i++) {
    　　　　　　　　if (oldValue[i] != newValue[i]) {
    　　　　　　　　}
    　　　　　　}
    　　　　},
    　　　　deep: true
        }
    },
    methods: {
        enterDetail (index) {
            cookie.set('status', this.status)
            cookie.set('cid', index)
            console.log(this.agentId)
            this.$router.push({path:'microdetail', query: {pid: index, agentId: this.agentId}})
        }
    }
}
</script>

<style lang="less" scoped>
    .circle-item {
        overflow: auto;
        padding: 0.3rem;
        border-bottom: 1px solid #ccc;
        img {
            width: 1.5rem;
            // height: 2rem;
            float: left;
            border-radius: 2px;
        }
        .circle-item-intro {
            margin-left: 1.8rem;
            color: #282828;
            font-size: 0;
            h3 {
                font-size: 0.32rem;
                font-weight: normal;
            }
            p {
                font-size: 0.26rem;
                margin-top: 0.2rem;
            }
            .circle-item-price {
                color: #ff2d41;
                font-size: 0.26rem;
                display: inline-block;
                margin-top: 0.15rem;
            }
            a {
                color: #282828;
                float: right;
                font-size: 0.26rem;
                margin-top: 0.1rem;
                &::after {
                    content: '';
                    display: inline-block;
                    width: 0.12rem;
                    height: 0.2rem;
                    background: url(../../../assets/img/next-icon.png) no-repeat;
                    background-size: 100%;
                    margin-left: 0.15rem;
                }
            }
        }
    }
    .no-circle-box {
        text-align: center;
        font-size: 0;
        img {
            width: 3.43rem;
            margin-top: 1.2rem;
        }
        p {
            color: #282828;
            font-size: 0.3rem;
            margin-top: 0.7rem;
        }
    }
</style>
